<template>
	<!-- 首页 -->
	<view :class="{ light: theme == 'light' }" class="content " >
		<view class="status_bar"><view class="top_view"></view></view>
		<view class="ptb10 w100 tc flex alcenter jscenter fixed bgPart head pr10">
			<image src="/static/logocolor_black.png" style="width: 200upx;height: 60upx;transform: scale(.9);" v-if="theme == 'light'"></image>
			<image src="/static/logocolor_white.png" style="width: 200upx;height: 60upx;transform: scale(.9);" v-else></image>
		</view>
		
		<view class="w100 mt50" style="height: 300upx;">
			<view class="b-title" style="margin-top: 160upx;">
				<view class="b-t2">Trustworthy digital asset trading platform</view>
				<view style="display: flex;">
					<view class="emphasis">Safety.</view>
					<view class="emphasis">Stable.</view>
					<view class="emphasis">Efficient</view>
				</view>
			</view>
			<view class="van-col van-col--24">
				<view class="t-b-1rem van-col van-col--16 van-col--offset-1" style="background-color: rgb(2, 60, 82);">
					<view class="b-radius van-cell van-field" style="color: rgb(0, 0, 0);">
							<view class="van-field__body">
								<input type="text" v-model="email" style="height: 35px;width: 100%;" class="van-field__control" :placeholder="$t('login').p_email" />
							</view>
					</view>
				</view>
				<view class="t-b-1rem van-col van-col--5 van-col--offset-1">
					<button type="primary" class="buy van-button van-button--info van-button--normal van-button--block" style="font-size: 14px;background-color: #2160ec;" @click="toRegister">
							STARTED
					</button>
				</view>
			</view>
			<view class="van-col van-col--24">
				<view class="flex alcenter" style="margin-left: 50upx;">
					<navigator url="/pages/mine/login" class="yellow">Already have an account?</navigator>
				</view>
			</view>
		</view>
		
		<!--轮播-->
		<swiper
			class="swiper w100 mt50"
			previous-margin="20px"
			next-margin="20px"
			:indicator-dots="true"
			:autoplay="true"
			:interval="3000"
			:circular="true"
			indicator-color="#aaa"
			indicator-active-color="#eee"
		>
			<swiper-item v-for="(item, index) in bannerList" :key="index"><image class="w100 ht100" :src="item.url"></image></swiper-item>
		</swiper>
		<!--公告哈哈test-->
		<view class="w100 plr10 bgPart">
			<view class=" flex alcenter bdbwhite">
				<image src="../../static/image/laba_blue.png" class="wt15 h15" v-if="theme == 'light'"></image>
				<image src="../../static/image/laba.png" class="wt15 h15" v-else></image>
				<swiper class="flex1 h40 ml10" :vertical="true" :autoplay="true" :interval="3000" :circular="true">
					<swiper-item class="flex alcenter" v-for="(item, i) in noticeList" :key="i">
						<navigator :url="'/pages/home/newsDetail?id=' + item.id">{{ item.title }}</navigator>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!--行情-->
		<swiper display-multiple-items="3" class="ptb10 h100 w100 bgPart" v-if="quoList.length > 2">
			<swiper-item class="flex alcenter around" v-for="(item, i) in quoList" :key="i">
				<navigator
					:url="'/pages/market/kline?symbol=' + item.symbol"
					class="flex column alcenter"
				>
					<text class="ft12">{{ item.symbol }}</text>
					<text class="ft18 bold" v-if="item.symbol" :class="{ red2: parseFloat(item.chg) < 0, green: parseFloat(item.chg) >= 0 || item.chg == '' }">{{ item.close }}</text>
					<text class="ft12" v-if="item.symbol" :class="{ red2: parseFloat(item.chg) < 0, green: parseFloat(item.chg) >= 0 || item.chg == '' }">
						{{ item.chg*100 | toFixed2}}%
					</text>
					<!-- <text class="ft12 blue4" v-if="item.symbol">≈ {{ ((item.cnyPrice)) | toFixed2 }} CNY</text> -->
					<text class="ft12 blue4" ></text>
				</navigator>
			</swiper-item>
		</swiper>
		<swiper class="ptb10 h100 w100 bgPart" v-else>
			<swiper-item class="flex alcenter jscenter w33" v-for="(item, i) in quoList" :key="i">
				<navigator
					:url="'/pages/market/kline?legal_id=' + item.quote_currency_id + '&currency_id=' + item.base_currency_id + '&symbol=' + item.base_currency_code + '/' + item.quote_currency_code+'&currency_match_id='+item.id"
					class="flex column alcenter"
				>
					<text class="ft12">{{item.symbol}}</text>
					<text class="ft18 bold" v-if="item.symbol" :class="{ red2: parseFloat(item.chg) < 0, green: parseFloat(item.chg) >= 0 || item.chg == '' }">{{ item.close }}</text>
					<text class="ft12" v-if="item.symbol" :class="{ red2: parseFloat(item.chg) < 0, green: parseFloat(item.chg) >= 0 || item.chg == '' }">
						<!-- {{ item.change.substr(0, 1) == '-' ? '' : '+' }}{{ (item.change - 0) | toFixed2 }}% -->
						{{ item.chg*100 | toFixed2}}%
					</text>
					<text class="ft12 blue4" v-if="item.symbol">≈ {{ ((item.cnyPrice)) | toFixed2 }} CNY</text>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 引导 -->
		
		<!--涨幅榜-->
		<view class=" w100 bgPart mt10" style="display: none;">
			<view class="ptb10 bdb_blue3 ft14 plr10 bold">{{ $t('home.updowns') }}</view>
			<view class="flex alcenter ft12 ptb5 blue4 plr10">
				<text style="flex: 1.5;">{{ $t('home.name') }}</text>
				<text class="flex1">{{ $t('home.new_price') }}</text>
				<text class="flex1 tr">{{ $t('home.fu') }}</text>
			</view>
			<navigator
				:url="'/pages/market/kline?legal_id=' + item.quote_currency_id + '&currency_id=' + item.base_currency_id + '&symbol=' + item.symbol+'&currency_match_id='+item.id"
				class="flex alcenter ft12 ptb10 blue4 plr10 bdb_blue3"
				v-for="(item, i) in quoList"
				:key="i"
			>
				<view class="" style="flex: 1.5;">
					<view class="">
						<text class="gray_e ft14 bold ft16">{{ item.symbol }}</text>
					</view>
					<view class="ft12">{{$t('market.volume')}} {{item.volume}}</view>
				</view>
				<text class="flex1 bold gray_e ft16" v-if="item.symbol">{{ item.close }}</text>
				<text class="flex1 tr flex jsend" v-if="item.symbol">
					<text class="radius2 ptb5 white wt70 block tc" :class="{ bgRed: parseFloat(item.chg) < 0, bgGreen: parseFloat(item.chg) >= 0 || item.chg == '' }">
						{{ item.chg*100 | toFixed2}}%
					</text>
				</text>
			</navigator>
		</view>
		<!--左侧弹框-->
		<view class="fixed w100 ht100 mask" @click.stop="hide" @touchmove.stop = "" :class="{ showMask: showLeft }">
			<view class="fixed bgPart w65 ht100 leftBox flex column" :class="{ isShow: showLeft }" @click.stop="stop">
				<view class="bgBlack pt60 pb20 plr20">
					<view class="tr mb10"><image @click.stop="hide" src="/static/image/arrowlf.png" class="wt30 h30 mr20" mode=""></image></view>
					<navigator url="/pages/mine/login" open-type="navigate" class="flex alcenter between" v-if="!token">
						<view>
							<view class="ft20 mb5">{{ $t('home.p_login') }}</view>
							<view class="ft14">{{ $t('home.welcome') }}</view>
						</view>
						<view><image src="/static/image/mores.png" class="wt20 h20"></image></view>
					</navigator>
					<navigator url="/pages/mine/userCenter" class="flex alcenter between" v-if="token">
						<view>
							<view class="ft16 mb5" v-if="info.mobile">{{ info.mobile }}</view>
							<view class="ft16 mb5" v-else>{{ info.email }}</view>
							<view class="ft12">UID:{{ info.uid }}</view>
						</view>
						<view><image src="/static/image/mores.png" class="wt20 h20"></image></view>
					</navigator>
				</view>
				<scroll-view scroll-y="true" show-scrollbar="true"  class="flex1 pb30"  style="min-height: 300px;">
					<navigator v-if="token" url="/pages/mine/real_authentication" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/personal.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('authentication.renzheng') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator v-if="info.is_seller" url="/pages/legal/storeDetail" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/shops.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('home.myshop') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator v-if="token" :url="'/pages/mine/invite?code=' + info.invite_code" class="flex alcenter ptb15 between plr20 ft14 bdb27">
						<view class="flex alcenter">
							<image src="/static/image/share.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('home.myshare') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<view  class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/sucerty.png" class="wt20 h20"></image>
							<text class="ml10">{{$t('about.theme')}}</text>
						</view>
						<switch @change="switchChange" :checked="theme=='light' ?  false:true "/>
					</view>
					<navigator url="/pages/mine/authorization_code" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/sucerty.png" class="wt20 h20"></image>
							<text class="ml10">{{$t('bind.codeauth')}}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="/pages/mine/security" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/sucerty.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('login.security') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="/pages/assets/bindMentionAddress" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/address.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('bind.bindAddr') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="/pages/mine/collect" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/receivables.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('collect.method') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					<navigator url="/pages/mine/about" class="flex alcenter ptb15 between plr20 ft14 bdb_blue3">
						<view class="flex alcenter">
							<image src="/static/image/account_about_image.png" class="wt20 h20"></image>
							<text class="ml10">{{ $t('about.abt') }}</text>
						</view>
						<image src="/static/image/mores.png" class="wt15 h15"></image>
					</navigator>
					
					<view class="mt30 plr20" v-if="token">
						<button type="primary" size="default" class="ft14" @click="logout">{{ $t('home.logout') }}</button>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			bannerList: [],
			noticeList: [],
			quoList: [],
			title: 'BITCAN',
			showLeft: false,
			showMask: false,
			token: '',
			info: '',
			cny_rate: '',
			languages: {
				zh: { name: '中文', img: '/static/image/zh.png' },
				en: { name: 'English', img: '/static/image/en.png' },
				hk: { name: '繁體中文', img: '/static/image/hk.png' },
				jp: { name: '日本語', img: '/static/image/jp.png' }
			},
			lang: '',
			isshowlang: true,
			email:''
		};
	},
	filters: {
		toFixed2: function(value, options) {
			value = Number(value);
			return value.toFixed(2);
		}
	},
	computed: {
		...mapState(['theme'])
	},
	onLoad() {
		var token = uni.getStorageSync('token');
		this.lang = uni.getStorageSync('lang') || 'zh';
		this.changeFooter();
		if (token) {
			this.getUserInfo();
		}
		
	},
	onShow() {
		this.$utils.setThemeTop(this.theme);
		this.$utils.setThemeBottom(this.theme);
		this.showLeft = false;
		this.showMask = false;
		this.token = uni.getStorageSync('token');
		this.getBannerImg();
		this.getNoticeList();
		this.quotation();
		this.$socket.listenFun([{ type: "sub", params: "DAY_MARKET" }], res => {
			var msg = JSON.parse(res);
			for (var i = 0; i < this.quoList.length; i++) {
				if (this.quoList[i].id == msg.currency_match_id) {
					this.quoList[i].currency_quotation.close = msg.quotation.close;
					this.quoList[i].currency_quotation.change = msg.quotation.change;
				}
			}
		});
	},
	methods: {
		// 底部导航  pages.json
		changeFooter() {
			uni.setTabBarItem({
				index: 0,
				text: this.$t('market.home')
			});
			// uni.setTabBarItem({
			// 	index: 1,
			// 	text: this.$t('fastExchange.content8')
			// });
			uni.setTabBarItem({
				index: 1,
				text: this.$t('market.market')
			});
			uni.setTabBarItem({
				index: 2,
				text: this.$t('market.c1')
			});
			uni.setTabBarItem({
				index: 3,
				text: this.$t('home.my')
			});
		},
		// 切换主题
		switchChange(e){
			var ui  = (this.theme == 'light') ? 'dark' : 'light';
			this.$store.dispatch("changeTheme",ui);
			this.$utils.setThemeTop(this.theme);
			this.$utils.setThemeBottom(this.theme);
		},
		// 语言切换
		changeLang(lang) {
			// this.$utils.initData({ url: 'lang/set', data: { lang }, type: 'POST' }, res => {
				console.log(lang);
				this.lang = lang;
				uni.setStorageSync('lang', lang);
				this.$i18n.locale = lang;
				this.isshowlang = false;
				this.changeFooter();
				this.showLeft = false;
				this.showMask = false;
				this.token = uni.getStorageSync('token');
				this.getBannerImg();
				this.getNoticeList();
			// });
		},
		//轮播图
		getBannerImg() {
			uni.showLoading();
			this.$utils.initData({ url: 'uc/ancillary/system/advertise', data: {sysAdvertiseLocation:0}}, (res, msg) => {
				// console.log(res)
				uni.stopPullDownRefresh();
				this.bannerList = res;
				uni.hideLoading();
			});
		},
		//公告
		getNoticeList() {
			this.$utils.initData({ url: 'uc/announcement/page', data: { pageNo: 1,pageSize:10 },type: 'post'}, (res, msg) => {
				uni.stopPullDownRefresh();
				this.noticeList = res.content;
			});
		},
		//行情交易对
		quotation() {
			this.$utils.initData({ url: 'market/symbol-thumb'}, (res, msg) => {
				uni.stopPullDownRefresh();
				let matches = res;
				this.quoList = matches.sort(function(a, b) {
					return b.change - a.change;
				});
			});
		},
		show() {
			if (this.token) {
				this.getUserInfo();
			}
			this.showLeft = !this.showLeft;
		},
		hide() {
			this.showLeft = !this.showLeft;
		},
		stop() {},
		//获取用户信息
		getUserInfo() {
			var that = this;
			// this.$utils.initDataToken({ url: 'user/info', data: {}, type: 'get' }, (res, msg) => {
			// 	uni.stopPullDownRefresh();
			// 	uni.setStorageSync('uid', msg.id);
			// 	that.info = res;
			// });
			that.info = uni.getStorageSync("userInfo");
		},
		//退出登录
		logout() {
			this.$utils.initDataToken({ url: 'user/logout', data: {}, type: 'post' }, (res, msg) => {
				uni.clearStorageSync();
				this.$utils.showLayer(msg);
				uni.reLaunch({
					url: '/pages/mine/login'
				})
			});
		},
		toRegister(){
			if(!this.$utils.checkEmail(this.email)){
				return this.$utils.showLayer(this.$t('login').p_temail)
			}
			uni.navigateTo({
				// url: '/pages/mine/login'
				url:`/pages/mine/setPwd?user_string=${this.email}`
			})
		}
	},
	onHide() {
		this.$socket.closeSocket();
	},
	onPullDownRefresh() {
		this.getBannerImg();
		this.getNoticeList();
		this.quotation();
	}
};
</script>

<style>
.head {
	top: var(--status-bar-height);
	left: 0;
	z-index: 999;
}
.content {
	/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
	/* padding-bottom: 20px; */
}
.myleft{
	width: calc(30upx + 50%);
}
.headImg {
	width: 50upx;
	height: 50upx;
	/* left: 10px; */
}
.swiper {
	height: 300upx;
}
.bgIndex {
	background: #0a1b2b;
}
.bgParts {
	background: #061623;
}
.leftBox {
	left: -100%;
	top: 0;
	z-index: 9999;
	transition: all 0.5s ease-out;
	opacity: 0.5;
}
.isShow {
	left: 0;
	top: 0;
	z-index: 9999;
	transition: all 0.5s ease-out;
	opacity: 1;
}
.mask {
	top: 0;
	left: -100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
}
.showMask {
	left: 0;
	top: 0;
	z-index: 999;
	opacity: 1;
}
.langs:last-child {
	border-bottom: none;
}
.w33{
	width: 33% !important;
}
.b-title{
    font-size: 11px;
    // color: #fff;
    line-height: 30px;
    text-align: left;
    padding-left: 15px;
}
.b-t2 {
    font-size: 25px;
    line-height: 25px;
    margin: 0;
	display: block;
	margin-block-start: 0.83em;
	margin-block-end: 0.83em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
}
.emphasis {
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    color: #2160ec;
    letter-spacing: 0;
    margin-right: 10px;
}
.van-col{
	float: left;
	box-sizing: border-box;
	min-height: 1px;
}
.van-col--24 {
    width: 100%;
}
.b-1rem, .t-b-1rem {
    margin-bottom: 1rem;
}
.t-b-1rem {
    margin-top: 1rem;
}
.van-col--16 {
    width: 66.66666667%;
}
.van-col--offset-1 {
    margin-left: 4.16666667%;
}

.b-radius {
    border-radius: .2rem;
}
.van-cell, .van-cell__value--alone, .van-checkbox__label, .van-field__label {
    color: #fff!important;
}
.van-cell {
    background-color: unset!important;
}
.van-cell, .van-cell__value--alone, .van-checkbox__label, .van-field__label {
    color: #fff!important;
}
.van-field__value {
    font-weight: 700;
}
.van-field__value {
    overflow: visible;
}
.van-cell__value--alone {
    color: #323233;
    text-align: left;
}
.van-cell__value {
    position: relative;
    overflow: hidden;
    color: #969799;
    text-align: right;
    vertical-align: middle;
    word-wrap: break-word;
}
.van-field__body {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
	margin-left: 20upx;
}
.van-field__control {
    color: #fff!important;
}
.van-col--5 {
    width: 20.83333333%;
}

</style>
